<template>
  <div class="modulesWrapper">
    <div class="teacherWrapper">
      <div class="filter">
        <el-input
          v-model="searchValue"
          style="max-width: 250px"
          placeholder="请输入名字或班级"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" @click="search()" />
          </template>
        </el-input>

        <div style="padding-left: 10px">
          <el-button type="primary" @click="addTeacher()">新增教师</el-button>
        </div>
      </div>
      <div class="table">
        <el-table :data="data" border style="width: 100%" max-height="450">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="id" label="id" />
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="subject" label="科目" />
          <el-table-column prop="position" label="职位" />
          <el-table-column prop="class" label="班级" min-width="120" />
          <el-table-column prop="date" label="更新时间" min-width="120" />
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
              <el-button link type="danger" size="small" @click="deleteTeacher(scope.row)">
                删除
              </el-button>
              <el-button link type="primary" size="small" @click="edit(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination background layout="prev, pager, next" :total="total" />
      </div>
    </div>
    <Teleport to="body">
      <TeacherInfo
        v-if="dialogVisible"
        :visiable="dialogVisible"
        :action="action"
        @updateVisiable="updateVisiable"
      />
    </Teleport>
  </div>
</template>
<script lang="ts" setup>
import TeacherInfo from './components/teacherInfo.vue';
import { reactive, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
let arr = [];
//姓名、科目、职位、所属班级
for (let i = 0; i < 16; i++) {
  arr.push({
    name: 'tom' + i,
    subject: '语文',
    position: '教师',
    class: '高一（1）班',
    id: 'ST' + i,
    date: '2016-10-03',
  });
}
const data = reactive(arr);
const total = ref(data.length);
const action = ref('');
const dialogVisible = ref(false);
const searchValue = ref('');

function updateVisiable(val: boolean) {
  dialogVisible.value = val;
}
function addTeacher() {
  action.value = 'add';
  dialogVisible.value = true;
}
function edit(row: any) {
  action.value = 'edit';
  dialogVisible.value = true;
}
function deleteTeacher(row: any) {
  console.log(row);
}
function search() {
  console.log(searchValue.value);
}
const detail = (row: any) => {
  console.log(row);
};
</script>
<style lang="scss" scoped>
@use './teacher-manage.scss';
</style>
